<template>
  <div class="mv-container">
    <div class="mv-wrap">
      <h3 class="title">mv详情</h3>
      <!-- mv -->
      <div class="video-wrap">
        <video controls autoplay :src="url"></video>
      </div>
      <!-- mv信息 -->
      <div class="info-wrap">
        <div class="singer-info">
          <div class="avatar-wrap">
            <img :src="icon" alt="" />
          </div>
          <span class="name">{{mvInfo.artistName}}</span>
        </div>
        <div class="mv-info">
          <h2 class="title">{{mvInfo.name}}</h2>
          <span class="date">发布：{{mvInfo.publishTime}}</span>
          <span class="number">播放：{{mvInfo.playCount | countFormat}}次</span>
          <p class="desc">
            {{mvInfo.desc}}
          </p>
        </div>
      </div>
      <!-- 精彩评论 -->
      <div class="comment-wrap">
        <p class="title">精彩评论<span class="number">({{hotTotal}})</span></p>
        <div class="comments-wrap">
          <div class="item" v-for="(item,i) in hotComments" :key="i">
            <div class="icon-wrap">
              <img :src="item.user.avatarUrl" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">{{item.user.nickname}}：</span>
                <span class="comment">{{item.content}}</span>
              </div>
              <div class="re-content" v-if="item.beReplied.length != 0">
                <span class="name">{{item.beReplied[0].user.nickname}}：</span>
                <span class="comment">{{item.beReplied[0].content}}</span>
              </div>
              <div class="date">{{item.timeStr}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新评论 -->
      <div class="comment-wrap">
        <p class="title">最新评论<span class="number">({{total}})</span></p>
        <div class="comments-wrap">
          <div class="item" v-for='(item,i) in comments' :key="i">
            <div class="icon-wrap">
              <img :src="item.user.avatarUrl" alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">{{item.user.nickname}}：</span>
                <span class="comment">{{item.content}}</span>
              </div>
              <div class="re-content" v-if="item.beReplied.length != 0">
                <span class="name">{{item.beReplied[0].user.nickname}}：</span>
                <span class="comment">{{item.beReplied[0].content}}</span>
              </div>
              <div class="date">{{item.timeStr}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total="total"
        :current-page="page" :page-size="5" :limit="limit">
      </el-pagination>
    </div>
    <div class="mv-recommend">
      <h3 class="title">相关推荐</h3>
      <div class="mvs">
        <div class="items">
          <div class="item" v-for="(item,i) in simiMvs" :key="i" @click=toMv(item.id)>
            <div class="img-wrap">
              <img :src="item.cover" alt="" />
              <span class="iconfont icon-play"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{item.playCount | countFormat}}</div>
              </div>
              <span class="time">{{item.duration | dateFormat}}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{item.name}}</div>
              <div class="singer">{{item.artist}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getMvUrlAPI, simiMvAPI, mvInfoAPI, artistsAPI, commentMvAPI } from '@/api'
  export default {
    name: 'mv',
    data() {
      return {
        // 总条数
        total: 0,
        // 页码
        page: 1,
        // 页容量
        limit: 10,
        url: '',
        simiMvs: [],
        mvInfo: {},
        icon: '',
        // 最新/全部评论
        comments: [],
        // 精彩/最新评论
        hotComments: [],
        hotTotal: 0
      };
    },
    created() {
      this.getUrl(this.$route.query.q)
      this.getSimiMv(this.$route.query.q)
      this.getMvComment(this.$route.query.q)
    },
    watch: {

    },
    methods: {
      handleCurrentChange(val) {
        this.page = val
        this.getMvComment(this.$route.query.q)
      },
      async getUrl(id) {
        const res = await getMvUrlAPI(id)
        this.url = res.data.data.url
      },
      async getSimiMv(id) {
        const simiRes = await simiMvAPI(id)
        this.simiMvs = simiRes.data.mvs

        const mvRes = await mvInfoAPI(id)
        this.mvInfo = mvRes.data.data
        // const coverRes = await artistsAPI(this.mvInfo.artists[0].id)
        // this.icon = res.data.artist.img1v1Url

        // this.$http({
        //   url: '/mv/detail',
        //   method: 'get',
        //   params: {
        //     mvid: id
        //   }
        // }).then(res => {
        //   this.mvInfo = res.data.data
        //   //歌手封面信息接口
        //   this.$http({
        //     url: '/artists',
        //     method: 'get',
        //     params: {
        //       id: this.mvInfo.artists[0].id
        //     }
        //   }).then(res => {
        //     this.icon = res.data.artist.img1v1Url
        //   })
        // })
      },
      async getMvComment(id) {
        const res = await commentMvAPI({
          id,
          offset: (this.page - 1) * 20
        })
        this.comments = res.data.comments
        this.total = res.data.total
        this.hotComments = res.data.hotComments
        this.hotTotal = res.data.hotComments.length
      },
      toMv(id) {
        this.getUrl(id)
        this.getSimiMv(id)
        this.getMvComment(id)
      }
    }
  };
</script>

<style></style>